<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="keywords" content="关键字,keywords" />
    <meta name="description" content="描述">
    <title>工单管理</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.css" />
    <link rel="stylesheet" href="__CSS__/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="__CSS__/style.css" />
    <link rel="stylesheet" href="__CSS__/zrstyle.css" />
    <script type="text/javascript" src="__JS__/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
    <script type="text/javascript" src="__JS__/bootstrap-datetimepicker.js"></script>
    <script src="__JS__/Popt.js"></script>
    <script src="__JS__/cityJson.js"></script>
    <script src="__JS__/citySet.js"></script>
</head>

<body>
<div class="container whitebg">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#whole" aria-controls="whole" role="tab" data-toggle="tab">全部</a>
        </li>
        <li role="presentation">
            <a href="#renew" aria-controls="renew" role="tab" data-toggle="tab">续费</a>
        </li>
        <li role="presentation">
            <a href="#change" aria-controls="change" role="tab" data-toggle="tab">换芯</a>
        </li>
        <li role="presentation">
            <a href="#install" aria-controls="install" role="tab" data-toggle="tab">新装</a>
        </li>
        <li role="presentation">
            <a href="#dismantle" aria-controls="dismantle" role="tab" data-toggle="tab">拆机</a>
        </li>
        <li role="presentation">
            <a href="#move" aria-controls="move" role="tab" data-toggle="tab">移机</a>
        </li>
        <li role="presentation">
            <a href="#repair" aria-controls="repair" role="tab" data-toggle="tab">维修</a>
        </li>
        <li role="presentation">
            <a href="#renewandrepair" aria-controls="renewandrepair" role="tab" data-toggle="tab">续费+维修</a>
        </li>
        <li role="presentation">
            <a href="#changeandrepair" aria-controls="changeandrepair" role="tab" data-toggle="tab">换芯+维修</a>
        </li>
    </ul>
    <div class="row query">
        <span class="fl">起止时间：</span>
        <input class="fl" type="text" id="datetimeStart" readonly class="form_datetime">
        <input class="fl" type="text" id="datetimeEnd" readonly class="form_datetime">
        <select class="fl">
            <option value="111">工单类型</option>
            <option value="222">移机</option>
            <option value="333">装机</option>
            <option value="444">续费</option>
            <option value="444">维修</option>
            <option value="444">拆机</option>
            <option value="444">续费+维修</option>
            <option value="444">换滤芯+维修</option>
        </select>
        <select class="fl">
            <option value="111">处理状态</option>
            <option value="222">已处理</option>
            <option value="333">待处理</option>
            <option value="444">服务中</option>
            <option value="444">已完成</option>
        </select>
        <div class="fl">
            <!--<input type="text" id="txt_city" class="form-control" />-->
            <input type="text" id="city" />
        </div>
        <span class="fl">工程员：</span><input class="fl" type="text" />
        <button class="fl btn btn-default">搜索</button>
        <button class="fl btn btn-primary">+备注</button>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="whole">
            <table class="table">
                <tr>
                    <th><input type="checkbox" onclick="checkAll(this)" id="all" /></th>
                    <th>户名</th>
                    <th>户号</th>
                    <th>合同编号</th>
                    <th>所属区域</th>
                    <th>工单类型</th>
                    <th>处理状态</th>
                    <th>下单时间</th>
                    <th>工程员</th>
                    <th>联系电话</th>
                    <th>移机次数</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox" name="box" onclick="selectAll()" /></td>
                    <td>张三</td>
                    <td>2145602</td>
                    <td>2017#01</td>
                    <td>渝北区</td>
                    <td>换芯</td>
                    <td>已处理</td>
                    <td>2017-8-21</td>
                    <td>李四</td>
                    <td>15423698745</td>
                    <td>0</td>
                    <td>
                        <a href="order_details.html">查看</a>
                        <a href="#">修改</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="box" onclick="selectAll()" /></td>
                    <td>张三</td>
                    <td>2145602</td>
                    <td>2017#01</td>
                    <td>渝北区</td>
                    <td>换芯</td>
                    <td>已处理</td>
                    <td>2017-8-21</td>
                    <td>李四</td>
                    <td>15423698745</td>
                    <td>0</td>
                    <td>
                        <a href="order_details.html">查看</a>
                        <a href="#">修改</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="box" onclick="selectAll()" /></td>
                    <td>张三</td>
                    <td>2145602</td>
                    <td>2017#01</td>
                    <td>渝北区</td>
                    <td>换芯</td>
                    <td>已处理</td>
                    <td>2017-8-21</td>
                    <td>李四</td>
                    <td>15423698745</td>
                    <td>0</td>
                    <td>
                        <a href="order_details.html">查看</a>
                        <a href="#">修改</a>
                    </td>
                </tr>
            </table>
        </div>
        <div role="tabpanel" class="tab-pane" id="renew">..2</div>
        <div role="tabpanel" class="tab-pane" id="change">.3.</div>
        <div role="tabpanel" class="tab-pane" id="install">.4.</div>
        <div role="tabpanel" class="tab-pane" id="dismantle">..5</div>
        <div role="tabpanel" class="tab-pane" id="move">..6</div>
        <div role="tabpanel" class="tab-pane" id="repair">..7</div>
        <div role="tabpanel" class="tab-pane" id="renewandrepair">..8</div>
        <div role="tabpanel" class="tab-pane" id="changeandrepair">..9</div>
    </div>
</div>
</body>

</html>

<script type="text/javascript">
    //头部选项卡
    $('#myTabs a').click(function(e) {
        e.preventDefault()
        $(this).tab('show')
    })

    //日期选择
    $("#datetimeStart").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
    });
    $("#datetimeEnd").datetimepicker({
        language: 'cn',
        format: "yyyy-mm-dd",
        autoclose: true,
        minView: "month",
        maxView: "decade",
        todayBtn: true,
        pickerPosition: "bottom-left"
    }).on("click", function(ev) {
        $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
    });

    //选择城市
    $("#city").click(function(e) {
        SelCity(this, e);
    });

    //复选框选中
    function checkAll(obj) {
        //alert(obj.checked);
        //获取name=box的复选框
        var userids = document.getElementsByName("box");
        //alert(userids.length);
        for(var i = 0; i < userids.length; i++) {
            userids[i].checked = obj.checked;
        }
    }

    function selectAll() {
        //获取name=box的复选框
        var userids = document.getElementsByName("box");
        var count = 0;
        //遍历所有的复选框
        for(var i = 0; i < userids.length; i++) {
            if(userids[i].checked) {
                count++;
            }
        }
        //选中复选框的个数==获取复选框的个数
        if(count == userids.length) {
            //设置id为all复选框选中
            document.getElementById("all").checked = true;
        } else {
            //设置id为all复选框不选中
            document.getElementById("all").checked = false;
        }

    }
</script>